<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>t h e m e l o c k . c o m</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/minified/core.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/minified/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/minified/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script type="text/javascript" src="assets/js/plugins/loaders/pace.min.js"></script>
	<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/plugins/loaders/blockui.min.js"></script>
	<script type="text/javascript" src="assets/js/plugins/ui/nicescroll.min.js"></script>
	<script type="text/javascript" src="assets/js/plugins/ui/drilldown.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script type="text/javascript" src="assets/js/plugins/internationalization/i18next.min.js"></script>
	<script type="text/javascript" src="assets/js/plugins/ui/prism.min.js"></script>

	<script type="text/javascript" src="assets/js/plugins/velocity/velocity.min.js"></script>
	<script type="text/javascript" src="assets/js/plugins/velocity/velocity.ui.min.js"></script>
	<script type="text/javascript" src="assets/js/plugins/notifications/jgrowl.min.js"></script>

	<script type="text/javascript" src="assets/js/core/app.js"></script>
	<script type="text/javascript" src="assets/js/pages/internationalization_callbacks.js"></script>
	<!-- /theme JS files -->

</head>

<body>

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		<div class="navbar-header">
			<a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""></a>

			<ul class="nav navbar-nav pull-right visible-xs-block">
				<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
			</ul>
		</div>

		<div class="navbar-collapse collapse" id="navbar-mobile">
			<ul class="nav navbar-nav">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-git-compare"></i>
						<span class="visible-xs-inline-block position-right">Git updates</span>
						<span class="badge bg-warning-400">9</span>
					</a>
					
					<div class="dropdown-menu dropdown-content">
						<div class="dropdown-content-heading">
							Git updates
							<ul class="icons-list">
								<li><a href="#"><i class="icon-sync"></i></a></li>
							</ul>
						</div>

						<ul class="media-list dropdown-content-body width-350">
							<li class="media">
								<div class="media-left">
									<a href="#" class="btn border-primary text-primary btn-flat btn-rounded btn-icon btn-sm"><i class="icon-git-pull-request"></i></a>
								</div>

								<div class="media-body">
									Drop the IE <a href="#">specific hacks</a> for temporal inputs
									<div class="media-annotation">4 minutes ago</div>
								</div>
							</li>

							<li class="media">
								<div class="media-left">
									<a href="#" class="btn border-warning text-warning btn-flat btn-rounded btn-icon btn-sm"><i class="icon-git-commit"></i></a>
								</div>
								
								<div class="media-body">
									Add full font overrides for popovers and tooltips
									<div class="media-annotation">36 minutes ago</div>
								</div>
							</li>

							<li class="media">
								<div class="media-left">
									<a href="#" class="btn border-info text-info btn-flat btn-rounded btn-icon btn-sm"><i class="icon-git-branch"></i></a>
								</div>
								
								<div class="media-body">
									<a href="#">Chris Arney</a> created a new <span class="text-semibold">Design</span> branch
									<div class="media-annotation">2 hours ago</div>
								</div>
							</li>

							<li class="media">
								<div class="media-left">
									<a href="#" class="btn border-success text-success btn-flat btn-rounded btn-icon btn-sm"><i class="icon-git-merge"></i></a>
								</div>
								
								<div class="media-body">
									<a href="#">Eugene Kopyov</a> merged <span class="text-semibold">Master</span> and <span class="text-semibold">Dev</span> branches
									<div class="media-annotation">Dec 18, 18:36</div>
								</div>
							</li>

							<li class="media">
								<div class="media-left">
									<a href="#" class="btn border-primary text-primary btn-flat btn-rounded btn-icon btn-sm"><i class="icon-git-pull-request"></i></a>
								</div>
								
								<div class="media-body">
									Have Carousel ignore keyboard events
									<div class="media-annotation">Dec 12, 05:46</div>
								</div>
							</li>
						</ul>

						<div class="dropdown-content-footer">
							<a href="#" data-popup="tooltip" title="All activity"><i class="icon-menu display-block"></i></a>
						</div>
					</div>
				</li>

				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-people"></i>
						<span class="visible-xs-inline-block position-right">Users</span>
					</a>
					
					<div class="dropdown-menu dropdown-content">
						<div class="dropdown-content-heading">
							Users online
							<ul class="icons-list">
								<li><a href="#"><i class="icon-gear"></i></a></li>
							</ul>
						</div>

						<ul class="media-list dropdown-content-body width-300">
							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading text-semibold">Jordana Ansley</a>
									<span class="display-block text-muted text-size-small">Lead web developer</span>
								</div>
								<div class="media-right media-middle"><span class="status-mark border-success"></span></div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading text-semibold">Will Brason</a>
									<span class="display-block text-muted text-size-small">Marketing manager</span>
								</div>
								<div class="media-right media-middle"><span class="status-mark border-danger"></span></div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading text-semibold">Hanna Walden</a>
									<span class="display-block text-muted text-size-small">Project manager</span>
								</div>
								<div class="media-right media-middle"><span class="status-mark border-success"></span></div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading text-semibold">Dori Laperriere</a>
									<span class="display-block text-muted text-size-small">Business developer</span>
								</div>
								<div class="media-right media-middle"><span class="status-mark border-warning-300"></span></div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading text-semibold">Vanessa Aurelius</a>
									<span class="display-block text-muted text-size-small">UX expert</span>
								</div>
								<div class="media-right media-middle"><span class="status-mark border-grey-400"></span></div>
							</li>
						</ul>

						<div class="dropdown-content-footer">
							<a href="#" data-popup="tooltip" title="All users"><i class="icon-menu display-block"></i></a>
						</div>
					</div>
				</li>
			</ul>

			<p class="navbar-text"><span class="label bg-success-400">Online</span></p>

			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown language-switch">
					<a class="dropdown-toggle" data-toggle="dropdown">
						<img src="assets/images/flags/gb.png" class="position-left" alt="">
						English
						<span class="caret"></span>
					</a>

					<ul class="dropdown-menu">
						<li><a class="ukrainian"><img src="assets/images/flags/ua.png" alt=""> Українська</a></li>
						<li><a class="english"><img src="assets/images/flags/gb.png" alt=""> English</a></li>
						<li><a class="russian"><img src="assets/images/flags/ru.png" alt=""> Русский</a></li>
					</ul>
				</li>

				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-bubbles4"></i>
						<span class="visible-xs-inline-block position-right">Messages</span>
						<span class="badge bg-warning-400">2</span>
					</a>
					
					<div class="dropdown-menu dropdown-content width-350">
						<div class="dropdown-content-heading">
							Messages
							<ul class="icons-list">
								<li><a href="#"><i class="icon-compose"></i></a></li>
							</ul>
						</div>

						<ul class="media-list dropdown-content-body">
							<li class="media">
								<div class="media-left">
									<img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt="">
									<span class="badge bg-danger-400 media-badge">5</span>
								</div>

								<div class="media-body">
									<a href="#" class="media-heading">
										<span class="text-semibold">James Alexander</span>
										<span class="media-annotation pull-right">04:58</span>
									</a>

									<span class="text-muted">who knows, maybe that would be the best thing for me...</span>
								</div>
							</li>

							<li class="media">
								<div class="media-left">
									<img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt="">
									<span class="badge bg-danger-400 media-badge">4</span>
								</div>

								<div class="media-body">
									<a href="#" class="media-heading">
										<span class="text-semibold">Margo Baker</span>
										<span class="media-annotation pull-right">12:16</span>
									</a>

									<span class="text-muted">That was something he was unable to do because...</span>
								</div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading">
										<span class="text-semibold">Jeremy Victorino</span>
										<span class="media-annotation pull-right">22:48</span>
									</a>

									<span class="text-muted">But that would be extremely strained and suspicious...</span>
								</div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading">
										<span class="text-semibold">Beatrix Diaz</span>
										<span class="media-annotation pull-right">Tue</span>
									</a>

									<span class="text-muted">What a strenuous career it is that I've chosen...</span>
								</div>
							</li>

							<li class="media">
								<div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></div>
								<div class="media-body">
									<a href="#" class="media-heading">
										<span class="text-semibold">Richard Vango</span>
										<span class="media-annotation pull-right">Mon</span>
									</a>
									
									<span class="text-muted">Other travelling salesmen live a life of luxury...</span>
								</div>
							</li>
						</ul>

						<div class="dropdown-content-footer">
							<a href="#" data-popup="tooltip" title="All messages"><i class="icon-menu display-block"></i></a>
						</div>
					</div>
				</li>

				<li class="dropdown dropdown-user">
					<a class="dropdown-toggle" data-toggle="dropdown">
						<img src="assets/images/placeholder.jpg" alt="">
						<span>Victoria</span>
						<i class="caret"></i>
					</a>

					<ul class="dropdown-menu dropdown-menu-right">
						<li><a href="#"><i class="icon-user-plus"></i> My profile</a></li>
						<li><a href="#"><i class="icon-coins"></i> My balance</a></li>
						<li><a href="#"><span class="badge badge-warning pull-right">58</span> <i class="icon-comment-discussion"></i> Messages</a></li>
						<li class="divider"></li>
						<li><a href="#"><i class="icon-cog5"></i> Account settings</a></li>
						<li><a href="#"><i class="icon-switch2"></i> Logout</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Second navbar -->
	<div class="navbar navbar-default" id="navbar-second">
		<ul class="nav navbar-nav no-border visible-xs-block">
			<li><a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-second-toggle"><i class="icon-menu7"></i></a></li>
		</ul>

		<div class="navbar-collapse collapse" id="navbar-second-toggle">
			<ul class="nav navbar-nav">
				<li>
					<a href="index.html">
						<i class="icon-display4 position-left"></i>
						<span data-i18n="nav.top.dash"></span>
					</a>
				</li>

				<li class="dropdown mega-menu mega-menu-wide">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-puzzle4 position-left"></i>
						<span data-i18n="nav.top.components.main"></span>
						<span class="caret"></span>
					</a>

					<div class="dropdown-menu dropdown-content">
						<div class="dropdown-content-body">
							<div class="row">
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.components.forms"></span>
									<ul class="menu-list">
										<li>
											<a href="#"><i class="icon-pencil3"></i> <span data-i18n="nav.form.main"></span></a>
											<ul>
												<li><a href="form_inputs_basic.html" data-i18n="nav.form.basic"></a></li>
												<li><a href="form_checkboxes_radios.html" data-i18n="nav.form.checkers"></a></li>
												<li><a href="form_input_groups.html" data-i18n="nav.form.groups"></a></li>
												<li><a href="form_controls_extended.html" data-i18n="nav.form.extended"></a></li>
												<li>
													<a href="#"><span data-i18n="nav.form.selects.main"></span></a>
													<ul>
														<li><a href="form_select2.html" data-i18n="nav.form.selects.select2"></a></li>
														<li><a href="form_multiselect.html" data-i18n="nav.form.selects.multi"></a></li>
														<li><a href="form_select_box_it.html" data-i18n="nav.form.selects.selectbox"></a></li>
														<li><a href="form_bootstrap_select.html" data-i18n="nav.form.selects.bootstrap"></a></li>
													</ul>
												</li>
												<li><a href="form_tag_inputs.html" data-i18n="nav.form.tags"></a></li>
												<li><a href="form_dual_listboxes.html" data-i18n="nav.form.listboxes"></a></li>
												<li><a href="form_editable.html" data-i18n="nav.form.editable"></a></li>
												<li><a href="form_validation.html" data-i18n="nav.form.validation"></a></li>
												<li><a href="form_inputs_grid.html" data-i18n="nav.form.grid"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-footprint"></i> <span data-i18n="nav.wizard.main"></span></a>
											<ul>
												<li><a href="wizard_steps.html" data-i18n="nav.wizard.steps"></a></li>
												<li><a href="wizard_form.html" data-i18n="nav.wizard.toform"></a></li>
												<li><a href="wizard_stepy.html" data-i18n="nav.wizard.stepy"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-spell-check"></i> <span data-i18n="nav.editor.main"></span></a>
											<ul>
												<li><a href="editor_summernote.html" data-i18n="nav.editor.summernote"></a></li>
												<li><a href="editor_ckeditor.html" data-i18n="nav.editor.ckeditor"></a></li>
												<li><a href="editor_wysihtml5.html" data-i18n="nav.editor.wysihtml5"></a></li>
												<li><a href="editor_code.html" data-i18n="nav.editor.code"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-select2"></i> <span data-i18n="nav.picker.main"></span></a>
											<ul>
												<li><a href="picker_date.html" data-i18n="nav.picker.datetime"></a></li>
												<li><a href="picker_color.html" data-i18n="nav.picker.color"></a></li>
												<li><a href="picker_location.html" data-i18n="nav.picker.location"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-insert-template"></i> <span data-i18n="nav.form_layout.main"></span></a>
											<ul>
												<li><a href="form_layout_vertical.html" data-i18n="nav.form_layout.vertical"></a></li>
												<li><a href="form_layout_horizontal.html" data-i18n="nav.form_layout.horizontal"></a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.components.show"></span>
									<ul class="menu-list">
										<li>
											<a href="#"><i class="icon-grid"></i> <span data-i18n="nav.component.main"></span></a>
											<ul>
												<li><a href="components_modals.html" data-i18n="nav.component.modals"></a></li>
												<li><a href="components_dropdowns.html" data-i18n="nav.component.dropdowns"></a></li>
												<li><a href="components_tabs.html" data-i18n="nav.component.tabs"></a></li>
												<li><a href="components_pills.html" data-i18n="nav.component.pills"></a></li>
												<li><a href="components_navs.html" data-i18n="nav.component.navs"></a></li>
												<li><a href="components_buttons.html" data-i18n="nav.component.buttons"></a></li>
												<li><a href="components_notifications_pnotify.html" data-i18n="nav.component.pnotify"></a></li>
												<li><a href="components_notifications_others.html" data-i18n="nav.component.notices"></a></li>
												<li><a href="components_popups.html" data-i18n="nav.component.popups"></a></li>
												<li><a href="components_alerts.html" data-i18n="nav.component.alerts"></a></li>
												<li><a href="components_pagination.html" data-i18n="nav.component.pagination"></a></li>
												<li><a href="components_labels.html" data-i18n="nav.component.labels"></a></li>
												<li><a href="components_loaders.html" data-i18n="nav.component.bars"></a></li>
												<li><a href="components_thumbnails.html" data-i18n="nav.component.thumbs"></a></li>
												<li><a href="components_page_header.html" data-i18n="nav.component.header"></a></li>
												<li><a href="components_breadcrumbs.html" data-i18n="nav.component.breadcrumbs"></a></li>
												<li><a href="components_media.html" data-i18n="nav.component.media"></a></li>
												<li><a href="components_sliders.html" data-i18n="nav.component.sliders"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-browser"></i> <span data-i18n="nav.panels.main"></span></a>
											<ul>
												<li><a href="panels.html" data-i18n="nav.panels.base"></a></li>
												<li><a href="panels_heading.html" data-i18n="nav.panels.heading"></a></li>
												<li><a href="panels_draggable.html" data-i18n="nav.panels.draggable"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-droplets"></i> <span data-i18n="nav.content.main"></span></a>
											<ul>
												<li><a href="appearance_text_styling.html" data-i18n="nav.content.text"></a></li>
												<li><a href="appearance_typography.html" data-i18n="nav.content.typo"></a></li>
												<li><a href="appearance_helpers.html" data-i18n="nav.content.helpers"></a></li>
												<li><a href="appearance_syntax_highlighter.html" data-i18n="nav.content.syntax"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-gift"></i> <span data-i18n="nav.extra.main"></span></a>
											<ul>
												<li><a href="extra_affix.html" data-i18n="nav.extra.affix"></a></li>
												<li><a href="extra_trees.html" data-i18n="nav.extra.tree"></a></li>
												<li><a href="extra_context_menu.html" data-i18n="nav.extra.context"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-wrench3"></i> <span data-i18n="nav.tools.main"></span></a>
											<ul>
												<li><a href="tools_session_timeout.html" data-i18n="nav.tools.session"></a></li>
												<li><a href="tools_idle_timeout.html" data-i18n="nav.tools.idle"></a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.components.ext"></span>
									<ul class="menu-list">
										<li>
											<a href="extension_blockui.html">
												<i class="icon-history"></i>
												<span data-i18n="nav.blockui.main"></span>
											</a>
										</li>
										<li>
											<a href="#"><i class="icon-upload"></i> <span data-i18n="nav.uploaders.main"></span></a>
											<ul>
												<li><a href="uploader_plupload.html" data-i18n="nav.uploaders.plupload"></a></li>
												<li><a href="uploader_bootstrap.html" data-i18n="nav.uploaders.bs"></a></li>
												<li><a href="uploader_dropzone.html" data-i18n="nav.uploaders.dropzone"></a></li>
											</ul>
										</li>
										<li>
											<a href="extension_image_cropper.html">
												<i class="icon-crop2"></i>
												<span data-i18n="nav.cropper.main"></span>
											</a>
										</li>
										<li>
											<a href="#"><i class="icon-calendar3"></i> <span data-i18n="nav.fc.main"></span></a>
											<ul>
												<li><a href="extension_fullcalendar_views.html" data-i18n="nav.fc.views"></a></li>
												<li><a href="extension_fullcalendar_styling.html" data-i18n="nav.fc.styling"></a></li>
												<li><a href="extension_fullcalendar_formats.html" data-i18n="nav.fc.lang"></a></li>
												<li><a href="extension_fullcalendar_advanced.html" data-i18n="nav.fc.advanced"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-sphere"></i> <span data-i18n="nav.int.main"></span></a>
											<ul>
												<li><a href="internationalization_switch_direct.html" data-i18n="nav.int.direct"></a></li>
												<li><a href="internationalization_switch_query.html" data-i18n="nav.int.qs"></a></li>
												<li><a href="internationalization_on_init.html" data-i18n="nav.int.oninit"></a></li>
												<li><a href="internationalization_after_init.html" data-i18n="nav.int.afterinit"></a></li>
												<li><a href="internationalization_fallback.html" data-i18n="nav.int.fallback"></a></li>
												<li class="active"><a href="internationalization_callbacks.html" data-i18n="nav.int.callback"></a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.components.tables"></span>
									<ul class="menu-list">
										<li>
											<a href="#"><i class="icon-table2"></i> <span data-i18n="nav.btable.main"></span></a>
											<ul>
												<li><a href="table_basic.html" data-i18n="nav.btable.basic"></a></li>
												<li><a href="table_sizing.html" data-i18n="nav.btable.sizing"></a></li>
												<li><a href="table_borders.html" data-i18n="nav.btable.borders"></a></li>
												<li><a href="table_styling.html" data-i18n="nav.btable.styling"></a></li>
												<li><a href="table_elements.html" data-i18n="nav.btable.elements"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-grid7"></i> <span data-i18n="nav.dtable.main"></span></a>
											<ul>
												<li><a href="datatable_basic.html" data-i18n="nav.dtable.basic"></a></li>
												<li><a href="datatable_styling.html" data-i18n="nav.dtable.styling"></a></li>
												<li><a href="datatable_advanced.html" data-i18n="nav.dtable.advanced"></a></li>
												<li><a href="datatable_sorting.html" data-i18n="nav.dtable.sorting"></a></li>
												<li><a href="datatable_api.html" data-i18n="nav.dtable.api"></a></li>
												<li><a href="datatable_data_sources.html" data-i18n="nav.dtable.sources"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-alignment-unalign"></i> <span data-i18n="nav.dtext.main"></span></a>
											<ul>
												<li><a href="datatable_extension_reorder.html" data-i18n="nav.dtext.reorder"></a></li>
												<li><a href="datatable_extension_fixed_columns.html" data-i18n="nav.dtext.fixed"></a></li>
												<li><a href="datatable_extension_colvis.html" data-i18n="nav.dtext.visibility"></a></li>
												<li><a href="datatable_extension_tools.html" data-i18n="nav.dtext.tools"></a></li>
												<li><a href="datatable_extension_scroller.html" data-i18n="nav.dtext.scroller"></a></li>
											</ul>
										</li>
										<li>
											<a href="table_responsive.html">
												<i class="icon-versions"></i>
												<span data-i18n="nav.tresp.main"></span>
											</a>
										</li>
										<li>
											<a href="datatable_responsive.html">
												<i class="icon-width"></i>
												<span data-i18n="nav.dtresp.main"></span>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</li>

				<li class="dropdown mega-menu mega-menu-wide">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-stars position-left"></i>
						<span data-i18n="nav.top.features.main"></span>
						<span class="caret"></span>
					</a>

					<div class="dropdown-menu dropdown-content">
						<div class="dropdown-content-body">
							<div class="row">
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.features.content"></span>
									<ul class="menu-list">
										<li>
											<a href="#"><i class="icon-stack2"></i> <span data-i18n="nav.page_layouts.main"></span></a>
											<ul>
												<li><a href="layout_navbar_fixed.html" data-i18n="nav.page_layouts.fixed_navbar"></a></li>
												<li><a href="layout_navbar_hideable.html" data-i18n="nav.page_layouts.hideable"></a></li>
												<li><a href="layout_sidebar_sticky_custom.html" data-i18n="nav.page_layouts.sticky_custom"></a></li>
												<li><a href="layout_sidebar_sticky_native.html" data-i18n="nav.page_layouts.sticky_native"></a></li>
												<li><a href="layout_footer_fixed.html" data-i18n="nav.page_layouts.fixed_footer"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-align-center-horizontal"></i> <span data-i18n="nav.boxed.main"></span></a>
											<ul>
												<li><a href="boxed_default.html" data-i18n="nav.boxed.default"></a></li>
												<li><a href="boxed_mini.html" data-i18n="nav.boxed.mini"></a></li>
												<li><a href="boxed_full.html" data-i18n="nav.boxed.full"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-copy"></i> <span data-i18n="nav.layouts.main"></span></a>
											<ul>
												<li><a href="../../layout_1/LTR/index.html" data-i18n="nav.layouts.layout1"></a></li>
												<li><a href="../../layout_2/LTR/index.html" id="layout2" data-i18n="nav.layouts.layout2"></a></li>
												<li><a href="../../layout_3/LTR/index.html" id="layout3" data-i18n="nav.layouts.layout3"></a></li>
												<li><a href="index.html" id="layout4" data-i18n="nav.layouts.layout4;[append]nav.layouts.current"></a></li>
												<li class="disabled"><a href="../../layout_5/LTR/index.html" id="layout5" data-i18n="nav.layouts.layout5;[append]nav.layouts.next"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-droplet2"></i> <span data-i18n="nav.colors.main"></span></a>
											<ul>
												<li><a href="colors_primary.html" data-i18n="nav.colors.primary"></a></li>
												<li><a href="colors_danger.html" data-i18n="nav.colors.danger"></a></li>
												<li><a href="colors_success.html" data-i18n="nav.colors.success"></a></li>
												<li><a href="colors_warning.html" data-i18n="nav.colors.warning"></a></li>
												<li><a href="colors_info.html" data-i18n="nav.colors.info"></a></li>
												<li class="navigation-divider"></li>
												<li><a href="colors_pink.html" data-i18n="nav.colors.pink"></a></li>
												<li><a href="colors_violet.html" data-i18n="nav.colors.violet"></a></li>
												<li><a href="colors_purple.html" data-i18n="nav.colors.purple"></a></li>
												<li><a href="colors_indigo.html" data-i18n="nav.colors.indigo"></a></li>
												<li><a href="colors_blue.html" data-i18n="nav.colors.blue"></a></li>
												<li><a href="colors_teal.html" data-i18n="nav.colors.teal"></a></li>
												<li><a href="colors_green.html" data-i18n="nav.colors.green"></a></li>
												<li><a href="colors_orange.html" data-i18n="nav.colors.orange"></a></li>
												<li><a href="colors_brown.html" data-i18n="nav.colors.brown"></a></li>
												<li><a href="colors_grey.html" data-i18n="nav.colors.grey"></a></li>
												<li><a href="colors_slate.html" data-i18n="nav.colors.slate"></a></li>
											</ul>
										</li>
										<li>
											<a href="appearance_content_grid.html">
												<i class="icon-grid52"></i>
												<span data-i18n="nav.grid.main"></span>
											</a>
										</li>
									</ul>
								</div>
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.features.layout"></span>
									<ul class="menu-list">
										<li>
											<a href="#"><i class="icon-indent-decrease2"></i> <span data-i18n="nav.sidebar.main"></span></a>
											<ul>
												<li><a href="sidebar_default_collapse.html" data-i18n="nav.sidebar.default.collapse"></a></li>
												<li><a href="sidebar_default_hide.html" data-i18n="nav.sidebar.default.hide"></a></li>
												<li><a href="sidebar_mini_collapse.html" data-i18n="nav.sidebar.mini.collapse"></a></li>
												<li><a href="sidebar_mini_hide.html" data-i18n="nav.sidebar.mini.hide"></a></li>
												<li>
													<a href="#"><span data-i18n="nav.sidebar.dual.main"></span></a>
													<ul>
														<li><a href="sidebar_dual.html" data-i18n="nav.sidebar.dual.base"></a></li>
														<li><a href="sidebar_dual_double_collapse.html" data-i18n="nav.sidebar.dual.dcollapse"></a></li>
														<li><a href="sidebar_dual_double_hide.html" data-i18n="nav.sidebar.dual.dhide"></a></li>
														<li><a href="sidebar_dual_swap.html" data-i18n="nav.sidebar.dual.swap"></a></li>
													</ul>
												</li>
												<li>
													<a href="#"><span data-i18n="nav.sidebar.double.main"></span></a>
													<ul>
														<li><a href="sidebar_double_collapse.html" data-i18n="nav.sidebar.double.collapse"></a></li>
														<li><a href="sidebar_double_hide.html" data-i18n="nav.sidebar.double.hide"></a></li>
														<li><a href="sidebar_double_fix_default.html" data-i18n="nav.sidebar.double.dfix"></a></li>
														<li><a href="sidebar_double_fix_mini.html" data-i18n="nav.sidebar.double.mfix"></a></li>
														<li><a href="sidebar_double_visible.html" data-i18n="nav.sidebar.double.ovisible"></a></li>
													</ul>
												</li>
												<li><a href="sidebar_categories.html" data-i18n="nav.sidebar.categories"></a></li>
												<li><a href="sidebar_hidden.html" data-i18n="nav.sidebar.hidden"></a></li>
												<li><a href="sidebar_dark.html" data-i18n="nav.sidebar.dark"></a></li>
												<li><a href="sidebar_components.html" data-i18n="nav.sidebar.components"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-sort"></i> <span data-i18n="nav.vnav.main"></span></a>
											<ul>
												<li><a href="navigation_vertical_collapsible.html" data-i18n="nav.vnav.collapse"></a></li>
												<li><a href="navigation_vertical_accordion.html" data-i18n="nav.vnav.accordion"></a></li>
												<li><a href="navigation_vertical_sizing.html" data-i18n="nav.vnav.sizing"></a></li>
												<li><a href="navigation_vertical_bordered.html" data-i18n="nav.vnav.bordered"></a></li>
												<li><a href="navigation_vertical_right_icons.html" data-i18n="nav.vnav.ricons"></a></li>
												<li><a href="navigation_vertical_disabled.html" data-i18n="nav.vnav.disabled"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-transmission"></i> <span data-i18n="nav.hnav.main"></span></a>
											<ul>
												<li><a href="navigation_horizontal_click.html" data-i18n="nav.hnav.click"></a></li>
												<li><a href="navigation_horizontal_hover.html" data-i18n="nav.hnav.hover"></a></li>
												<li><a href="navigation_horizontal_elements.html" data-i18n="nav.hnav.custom"></a></li>
												<li><a href="navigation_horizontal_tabs.html" data-i18n="nav.hnav.tabbed"></a></li>
												<li><a href="navigation_horizontal_disabled.html" data-i18n="nav.hnav.disabled"></a></li>
												<li><a href="navigation_horizontal_mega.html" data-i18n="nav.hnav.mega"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-paragraph-justify3"></i> <span data-i18n="nav.navbar.main"></span></a>
											<ul>
												<li><a href="navbar_single.html" data-i18n="nav.navbar.single"></a></li>
												<li>
													<a href="#"><span data-i18n="nav.navbar.multiple.main"></span></a>
													<ul>
														<li><a href="navbar_multiple_navbar_navbar.html" data-i18n="nav.navbar.multiple.nn"></a></li>
														<li><a href="navbar_multiple_header_navbar.html" data-i18n="nav.navbar.multiple.hn"></a></li>
														<li><a href="navbar_multiple_navbar_content.html" data-i18n="nav.navbar.multiple.nc"></a></li>
														<li><a href="navbar_multiple_top_bottom.html" data-i18n="nav.navbar.multiple.tb"></a></li>
													</ul>
												</li>
												<li><a href="navbar_colors.html" data-i18n="nav.navbar.colors"></a></li>
												<li><a href="navbar_sizes.html" data-i18n="nav.navbar.sizing"></a></li>
												<li><a href="navbar_hideable.html" data-i18n="nav.navbar.hideable"></a></li>
												<li><a href="navbar_components.html" data-i18n="nav.navbar.components"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-tree5"></i> <span data-i18n="nav.levels.main"></span></a>
											<ul>
												<li><a href="#"><i class="icon-IE"></i> <span data-i18n="nav.levels.ie"></span></a></li>
												<li>
													<a href="#"><i class="icon-firefox"></i> <span data-i18n="nav.levels.firefox"></span></a>
													<ul>
														<li><a href="#"><i class="icon-android"></i> <span data-i18n="nav.levels.android"></span></a></li>
														<li>
															<a href="#"><i class="icon-apple2"></i> <span data-i18n="nav.levels.apple"></span></a>
															<ul>
																<li><a href="#"><i class="icon-html5"></i> <span data-i18n="nav.levels.html"></span></a></li>
																<li><a href="#"><i class="icon-css3"></i> <span data-i18n="nav.levels.css"></span></a></li>
															</ul>
														</li>
														<li><a href="#"><i class="icon-windows"></i> <span data-i18n="nav.levels.win"></span></a></li>
													</ul>
												</li>
												<li><a href="#"><i class="icon-chrome"></i> <span data-i18n="nav.levels.chrome"></span></a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.features.vis"></span>
									<ul class="menu-list">
										<li>
											<a href="#"><i class="icon-graph"></i> <span data-i18n="nav.echarts.main"></span></a>
											<ul>
												<li><a href="echarts_lines_areas.html" data-i18n="nav.echarts.line"></a></li>
												<li><a href="echarts_columns_waterfalls.html" data-i18n="nav.echarts.column"></a></li>
												<li><a href="echarts_bars_tornados.html" data-i18n="nav.echarts.bar"></a></li>
												<li><a href="echarts_scatter.html" data-i18n="nav.echarts.scatter"></a></li>
												<li><a href="echarts_pies_donuts.html" data-i18n="nav.echarts.pie"></a></li>
												<li><a href="echarts_funnels_chords.html" data-i18n="nav.echarts.funnel"></a></li>
												<li><a href="echarts_candlesticks_others.html" data-i18n="nav.echarts.other"></a></li>
												<li><a href="echarts_combinations.html" data-i18n="nav.echarts.combo"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-statistics"></i> <span data-i18n="nav.d3.main"></span></a>
											<ul>
												<li><a href="d3_lines_basic.html" data-i18n="nav.d3.line.basic"></a></li>
												<li><a href="d3_lines_advanced.html" data-i18n="nav.d3.line.advanced"></a></li>
												<li><a href="d3_bars_basic.html" data-i18n="nav.d3.bar.basic"></a></li>
												<li><a href="d3_bars_advanced.html" data-i18n="nav.d3.bar.advanced"></a></li>
												<li><a href="d3_pies.html" data-i18n="nav.d3.pie"></a></li>
												<li><a href="d3_circle_diagrams.html" data-i18n="nav.d3.circle"></a></li>
												<li><a href="d3_tree.html" data-i18n="nav.d3.tree"></a></li>
												<li><a href="d3_other.html" data-i18n="nav.d3.other"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-stats-dots"></i> <span data-i18n="nav.dimple.main"></span></a>
											<ul>
												<li>
													<a href="#"><span data-i18n="nav.dimple.line.main"></span></a>
													<ul>
														<li><a href="dimple_lines_horizontal.html" data-i18n="nav.dimple.line.hor"></a></li>
														<li><a href="dimple_lines_vertical.html" data-i18n="nav.dimple.line.ver"></a></li>
													</ul>
												</li>
												<li>
													<a href="#"><span data-i18n="nav.dimple.bar.main"></span></a>
													<ul>
														<li><a href="dimple_bars_horizontal.html" data-i18n="nav.dimple.bar.hor"></a></li>
														<li><a href="dimple_bars_vertical.html" data-i18n="nav.dimple.bar.ver"></a></li>
													</ul>
												</li>
												<li>
													<a href="#"><span data-i18n="nav.dimple.area.main"></span></a>
													<ul>
														<li><a href="dimple_area_horizontal.html" data-i18n="nav.dimple.area.hor"></a></li>
														<li><a href="dimple_area_vertical.html" data-i18n="nav.dimple.area.ver"></a></li>
													</ul>
												</li>
												<li>
													<a href="#"><span data-i18n="nav.dimple.step.main"></span></a>
													<ul>
														<li><a href="dimple_step_horizontal.html" data-i18n="nav.dimple.step.hor"></a></li>
														<li><a href="dimple_step_vertical.html" data-i18n="nav.dimple.step.ver"></a></li>
													</ul>
												</li>
												<li><a href="dimple_pies.html" data-i18n="nav.dimple.pie"></a></li>
												<li><a href="dimple_rings.html" data-i18n="nav.dimple.ring"></a></li>
												<li><a href="dimple_scatter.html" data-i18n="nav.dimple.scatter"></a></li>
												<li><a href="dimple_bubble.html" data-i18n="nav.dimple.bubble"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-stats-bars"></i> <span data-i18n="nav.c3.main"></span></a>
											<ul>
												<li><a href="c3_lines_areas.html" data-i18n="nav.c3.line"></a></li>
												<li><a href="c3_bars_pies.html" data-i18n="nav.c3.bar"></a></li>
												<li><a href="c3_advanced.html" data-i18n="nav.c3.advanced"></a></li>
												<li><a href="c3_axis.html" data-i18n="nav.c3.axis"></a></li>
												<li><a href="c3_grid.html" data-i18n="nav.c3.grid"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-google"></i> <span data-i18n="nav.google.main"></span></a>
											<ul>
												<li><a href="google_lines.html" data-i18n="nav.google.line"></a></li>
												<li><a href="google_bars.html" data-i18n="nav.google.bar"></a></li>
												<li><a href="google_pies.html" data-i18n="nav.google.pie"></a></li>
												<li><a href="google_scatter_bubble.html" data-i18n="nav.google.bubble"></a></li>
												<li><a href="google_other.html" data-i18n="nav.google.other"></a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="col-md-3">
									<span class="menu-heading underlined" data-i18n="nav.top.features.extra"></span>
									<ul class="menu-list">
										<li>
											<a href="animations_css3.html">
												<i class="icon-spinner3 spinner position-left"></i>
												<span data-i18n="nav.animation.main"></span>
											</a>
										</li>
										<li>
											<a href="#"><i class="icon-spinner10 spinner position-left"></i> <span data-i18n="nav.velocity.main"></span></a>
											<ul>
												<li><a href="animations_velocity_basic.html" data-i18n="nav.velocity.basic"></a></li>
												<li><a href="animations_velocity_ui.html" data-i18n="nav.velocity.ui"></a></li>
												<li><a href="animations_velocity_examples.html" data-i18n="nav.velocity.advanced"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-map5"></i> <span data-i18n="nav.maps.main"></span></a>
											<ul>
												<li>
													<a href="#"><span data-i18n="nav.maps.gmaps.main"></span></a>
													<ul>
														<li><a href="maps_google_basic.html" data-i18n="nav.maps.gmaps.basic"></a></li>
														<li><a href="maps_google_controls.html" data-i18n="nav.maps.gmaps.controls"></a></li>
														<li><a href="maps_google_markers.html" data-i18n="nav.maps.gmaps.markers"></a></li>
														<li><a href="maps_google_drawings.html" data-i18n="nav.maps.gmaps.drawings"></a></li>
														<li><a href="maps_google_layers.html" data-i18n="nav.maps.gmaps.layers"></a></li>
													</ul>
												</li>
												<li><a href="maps_vector.html" data-i18n="nav.maps.vmaps"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-magazine"></i> <span data-i18n="nav.timeline.main"></span></a>
											<ul>
												<li><a href="timelines_left.html" data-i18n="nav.timeline.left"></a></li>
												<li><a href="timelines_right.html" data-i18n="nav.timeline.right"></a></li>
												<li><a href="timelines_center.html" data-i18n="nav.timeline.center"></a></li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-thumbs-up2 position-left"></i> <span data-i18n="nav.icons.main"></span></a>
											<ul>
												<li><a href="icons_glyphicons.html" data-i18n="nav.icons.glyphicons"></a></li>
												<li><a href="icons_icomoon.html" data-i18n="nav.icons.icomoon"></a></li>
												<li><a href="icons_fontawesome.html" data-i18n="nav.icons.fontawesome"></a></li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</li>

				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-make-group position-left"></i>
						<span data-i18n="nav.top.kits"></span>
						<span class="caret"></span>
					</a>

					<ul class="dropdown-menu width-250">
						<li class="dropdown-header" data-i18n="nav.tasks.header_apps"></li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-task"></i> <span data-i18n="nav.tasks.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.tasks.header_1"></li>
								<li><a href="task_manager_grid.html" data-i18n="nav.tasks.grid"></a></li>
								<li><a href="task_manager_list.html" data-i18n="nav.tasks.list"></a></li>
								<li><a href="task_manager_detailed.html" data-i18n="nav.tasks.detailed"></a></li>
							</ul>
						</li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-cash3"></i> <span data-i18n="nav.invoice.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.invoice.header_1"></li>
								<li><a href="invoice_template.html" data-i18n="nav.invoice.template"></a></li>
								<li><a href="invoice_grid.html" data-i18n="nav.invoice.grid"></a></li>
								<li><a href="invoice_archive.html" data-i18n="nav.invoice.archive"></a></li>
							</ul>
						</li>

						<li class="dropdown-header" data-i18n="nav.user.header_user"></li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-people"></i> <span data-i18n="nav.user.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.user.header_1"></li>
								<li><a href="user_pages_cards.html" data-i18n="nav.user.cards"></a></li>
								<li><a href="user_pages_list.html" data-i18n="nav.user.list"></a></li>
								<li class="dropdown-header highlight" data-i18n="nav.user.header_2"></li>
								<li><a href="user_pages_profile.html" data-i18n="nav.user.profile"></a></li>
								<li><a href="user_pages_profile_cover.html" data-i18n="nav.user.cover"></a></li>
							</ul>
						</li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-user-plus"></i> <span data-i18n="nav.login.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.login.header_1"></li>
								<li><a href="login_simple.html" data-i18n="nav.login.simple"></a></li>
								<li><a href="login_advanced.html" data-i18n="nav.login.advanced"></a></li>
								<li><a href="login_registration.html" data-i18n="nav.login.reg"></a></li>
								<li><a href="login_registration_advanced.html" data-i18n="nav.login.reg_advanced"></a></li>
								<li class="dropdown-header highlight" data-i18n="nav.login.header_2"></li>
								<li><a href="login_unlock.html" data-i18n="nav.login.unlock"></a></li>
								<li><a href="login_password_recover.html" data-i18n="nav.login.forgot"></a></li>
								<li class="dropdown-header highlight" data-i18n="nav.login.header_3"></li>
								<li><a href="login_hide_navbar.html" data-i18n="nav.login.nonavbar"></a></li>
								<li><a href="login_transparent.html" data-i18n="nav.login.transparent"></a></li>
								<li><a href="http://ow.ly/XqzNo" data-i18n="nav.login.bg"></a></li>
							</ul>
						</li>

						<li class="dropdown-header" data-i18n="nav.search.header_kits"></li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-search4"></i> <span data-i18n="nav.search.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.search.header_1"></li>
								<li><a href="search_basic.html" data-i18n="nav.search.basic"></a></li>
								<li><a href="search_users.html" data-i18n="nav.search.user"></a></li>
								<li class="dropdown-header highlight" data-i18n="nav.search.header_2"></li>
								<li><a href="search_images.html" data-i18n="nav.search.image"></a></li>
								<li><a href="search_videos.html" data-i18n="nav.search.video"></a></li>
							</ul>
						</li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-images2"></i> <span data-i18n="nav.gallery.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.gallery.header_1"></li>
								<li><a href="gallery_grid.html" data-i18n="nav.gallery.grid"></a></li>
								<li><a href="gallery_titles.html" data-i18n="nav.gallery.title"></a></li>
								<li><a href="gallery_description.html" data-i18n="nav.gallery.desc"></a></li>
								<li><a href="gallery_library.html" data-i18n="nav.gallery.library"></a></li>
							</ul>
						</li>

						<li class="dropdown-header" data-i18n="nav.support.header_tools"></li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-lifebuoy"></i> <span data-i18n="nav.support.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.support.header_1"></li>
								<li><a href="support_conversation_layouts.html" data-i18n="nav.support.chat_layouts"></a></li>
								<li><a href="support_conversation_options.html" data-i18n="nav.support.chat_options"></a></li>
								<li class="dropdown-header highlight" data-i18n="nav.support.header_2"></li>
								<li><a href="support_knowledgebase.html" data-i18n="nav.support.base"></a></li>
								<li><a href="support_faq.html" data-i18n="nav.support.faq"></a></li>
							</ul>
						</li>
						<li class="dropdown-submenu">
							<a href="#"><i class="icon-warning"></i> <span data-i18n="nav.error.main"></span></a>
							<ul class="dropdown-menu width-200">
								<li class="dropdown-header highlight" data-i18n="nav.error.header_1"></li>
								<li><a href="error_403.html" data-i18n="nav.error.403"></a></li>
								<li><a href="error_404.html" data-i18n="nav.error.404"></a></li>
								<li><a href="error_405.html" data-i18n="nav.error.405"></a></li>
								<li><a href="error_500.html" data-i18n="nav.error.500"></a></li>
								<li><a href="error_503.html" data-i18n="nav.error.503"></a></li>
								<li><a href="error_offline.html" data-i18n="nav.error.offline"></a></li>
							</ul>
						</li>
					</ul>
				</li>

				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-strategy position-left"></i>
						<span data-i18n="nav.top.starters"></span>
						<span class="caret"></span>
					</a>

					<ul class="dropdown-menu width-200">
						<li class="dropdown-header" data-i18n="nav.starter.header_1"></li>
						<li class="dropdown-submenu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="icon-grid2"></i>
								<span data-i18n="nav.starter.cols.main"></span>
							</a>

							<ul class="dropdown-menu">
								<li class="dropdown-header highlight" data-i18n="nav.starter.header_1_1"></li>
								<li><a href="starters/1_col.html" data-i18n="nav.starter.cols.1col"></a></li>
								<li><a href="starters/2_col.html" data-i18n="nav.starter.cols.2col"></a></li>
								<li class="dropdown-submenu">
									<a href="#"><span data-i18n="nav.starter.cols.3col.main"></span></a>
									<ul class="dropdown-menu">
										<li class="dropdown-header highlight" data-i18n="nav.starter.header_1_2"></li>
										<li><a href="starters/3_col_dual.html" data-i18n="nav.starter.cols.3col.dual"></a></li>
										<li><a href="starters/3_col_double.html" data-i18n="nav.starter.cols.3col.double"></a></li>
									</ul>
								</li>
								<li><a href="starters/4_col.html" data-i18n="nav.starter.cols.4col"></a></li>
							</ul>
						</li>
						<li class="dropdown-submenu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="icon-paragraph-justify3"></i>
								<span data-i18n="nav.starter.navs.main"></span>
							</a>

							<ul class="dropdown-menu">
								<li class="dropdown-header highlight" data-i18n="nav.starter.header_1_3"></li>
								<li><a href="starters/layout_navbar_fixed_main.html" data-i18n="nav.starter.navs.primary"></a></li>
								<li><a href="starters/layout_navbar_fixed_secondary.html" data-i18n="nav.starter.navs.secondary"></a></li>
								<li><a href="starters/layout_navbar_fixed_both.html" data-i18n="nav.starter.navs.both"></a></li>
							</ul>
						</li>
						<li class="dropdown-header" data-i18n="nav.starter.header_2"></li>
						<li><a href="starters/layout_boxed.html"><i class="icon-align-center-horizontal"></i> <span data-i18n="nav.starter.boxed"></span></a></li>
						<li><a href="starters/layout_sidebar_sticky.html"><i class="icon-flip-vertical3"></i> <span data-i18n="nav.starter.sticky"></span></a></li>
					</ul>
				</li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li>
					<a href="changelog.html">
						<i class="icon-history position-left"></i>
						<span data-i18n="nav.top.changelog"></span>
						<span class="label label-inline position-right bg-success-400">1.0</span>
					</a>
				</li>

				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<i class="icon-cog3"></i>
						<span class="visible-xs-inline-block position-right">Settings</span>
						<span class="caret"></span>
					</a>

					<ul class="dropdown-menu dropdown-menu-right">
						<li><a href="#"><i class="icon-user-lock"></i> Account security</a></li>
						<li><a href="#"><i class="icon-statistics"></i> Analytics</a></li>
						<li><a href="#"><i class="icon-accessibility"></i> Accessibility</a></li>
						<li class="divider"></li>
						<li><a href="#"><i class="icon-gear"></i> All settings</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<!-- /second navbar -->


	<!-- Page header -->
	<div class="page-header">
		<div class="page-header-content">
			<div class="page-title">
				<h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">Translation</span> - Callbacks</h4>

				<ul class="breadcrumb breadcrumb-caret position-right">
					<li><a href="index.html">Home</a></li>
					<li><a href="internationalization_callbacks.html">Translation</a></li>
					<li class="active">Callbacks</li>
				</ul>
			</div>

			<div class="heading-elements">
				<div class="heading-btn-group">
					<a href="#" class="btn btn-link btn-float has-text"><i class="icon-bars-alt text-primary"></i><span>Statistics</span></a>
					<a href="#" class="btn btn-link btn-float has-text"><i class="icon-calculator text-primary"></i> <span>Invoices</span></a>
					<a href="#" class="btn btn-link btn-float has-text"><i class="icon-calendar5 text-primary"></i> <span>Schedule</span></a>
				</div>
			</div>
		</div>
	</div>
	<!-- /page header -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main content -->
			<div class="content-wrapper">

					<!-- Callbacks -->
					<div class="panel panel-flat">
						<div class="panel-heading">
							<h5 class="panel-title">Library callbacks</h5>
							<div class="heading-elements">
								<ul class="icons-list">
			                		<li><a data-action="collapse"></a></li>
			                		<li><a data-action="reload"></a></li>
			                		<li><a data-action="close"></a></li>
			                	</ul>
		                	</div>
						</div>

						<div class="panel-body">
							<p class="content-group">This example demonstrates <code>on init</code> and <code>after init</code> callbacks with current language function. Current language can be read out using <code>i18next.lng()</code> function. This example includes the following callbacks: on library initialization - informs that library is initialized and language is set; on language detection - returns detected language on initialization; on language change - returns the language that is set after initialization.</p>

							<p class="text-semibold">Callbacks example:</p>

							<div class="navbar navbar-inverse bg-teal-400 navbar-component" style="position: relative;">
								<div class="navbar-header">
									<a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""></a>

									<ul class="nav navbar-nav pull-right visible-xs-block">
										<li><a data-toggle="collapse" data-target="#navbar-demo-mobile"><i class="icon-grid3"></i></a></li>
									</ul>
								</div>

								<div class="navbar-collapse collapse" id="navbar-demo-mobile">
									<ul class="nav navbar-nav">
										<li class="dropdown language-switch">
											<a class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
											<ul class="dropdown-menu">
												<li><a class="english"><img src="assets/images/flags/gb.png" alt=""> English</a></li>
												<li><a class="russian"><img src="assets/images/flags/ru.png" alt=""> Русский</a></li>
												<li><a class="ukrainian"><img src="assets/images/flags/ua.png" alt=""> Українська</a></li>
											</ul>
										</li>
									</ul>

									<ul class="nav navbar-nav navbar-right language-switch">
										<li><a class="english"><img src="assets/images/flags/gb.png" class="position-left" alt=""> EN &rarr;</a></li>
										<li><a class="russian"><img src="assets/images/flags/ru.png" class="position-left" alt=""> RU &rarr;</a></li>
										<li><a class="ukrainian"><img src="assets/images/flags/ua.png" class="position-left" alt=""> UA &rarr;</a></li>
									</ul>
								</div>
							</div>

						<div class="row">
							<div class="col-md-6">
								<p class="text-semibold">Example markup:</p>
								<pre class="content-group"><code class="language-markup">&lt;!-- Basic markup -->
&lt;ul class="dropdown-menu">
	&lt;li>
		&lt;a class="english">
			&lt;img src="assets/images/flags/gb.png" alt=""> English
		&lt;/a>
	&lt;/li>
	&lt;li>
		&lt;a class="ukrainian">
			&lt;img src="assets/images/flags/ua.png" alt=""> Ukrainian
		&lt;/a>
	&lt;/li>
&lt;/ul>
</code></pre>
							</div>

							<div class="col-md-6">
								<p class="text-semibold">JS code example:</p>
								<pre class="content-group"><code class="language-javascript">/* Set init options */
i18n.init({
	...
}, function () {
	$('body').i18n(); // Run translation
});

// Set language after init
$('.ukrainian').on('click', function() {
	i18n.setLng('ua', function() {
	    $('body').i18n();
	});
});
</code></pre>
							</div>
						</div>
					</div>
				</div>
				<!-- /set language after init -->


				<!-- i18next overview -->
				<div class="panel panel-flat">
					<div class="panel-heading">
						<h5 class="panel-title">i18next library</h5>
						<div class="heading-elements">
							<ul class="icons-list">
		                		<li><a data-action="collapse"></a></li>
		                		<li><a data-action="reload"></a></li>
		                		<li><a data-action="close"></a></li>
		                	</ul>
	                	</div>
					</div>

					<div class="panel-body">
						<h6 class="text-semibold">Overview</h6>
						<p class="content-group"><code>Internationalization</code> and <code>localization</code> are means of adapting web applications to different languages, regional differences and technical requirements of a target market. <code>Internationalization</code> is the process of designing an application so that it can potentially be adapted to various languages and regions. <code>Localization</code> is the process of adapting internationalized application for a specific region or language by adding locale-specific components and translating text. Framework template uses <code>i18next</code> library for internationalization and localization.</p>

						<p>Main i18next benefits:</p>
						<div class="row content-group">
							<div class="col-md-4">
								<ul class="list">
									<li>Support of variables</li>
									<li>Support of nesting</li>
									<li>Support of context</li>
									<li>Support of multiple plural forms</li>
								</ul>
							</div>

							<div class="col-md-4">
								<ul class="list">
									<li>Gettext support</li>
									<li>Sprintf support</li>
									<li>Detect language</li>
									<li>Graceful translation lookup</li>
								</ul>
							</div>

							<div class="col-md-4">
								<ul class="list">
									<li>Custom post processing</li>
									<li>Post missing resources to server</li>
									<li>Resource caching in browser</li>
									<li>Fetch resources from server</li>
								</ul>
							</div>
						</div>


						<h6 class="text-semibold">Basic usage</h6>
						<p class="content-group"><strong>i18next</strong> is a full-featured i18n javascript library for translating your web application. By default, Framework template supports language switching in 2 different ways, language detection according to the user navigator language and fallback languages. All plugin settings also support and use cookies by default. For demonstration purposes, main structure of this page was translated to <span class="text-semibold">russian</span>, <span class="text-semibold">ukrainian</span> and default <span class="text-semibold">english</span> languages. You can change current language by choosing it in the dropdown menu located in top navbar.</p>

						<p class="text-semibold">Page markup:</p>
						<pre class="content-group"><code class="language-markup">&lt;!DOCTYPE html>
&lt;html>
	&lt;head>
		&lt;script type="text/javascript" src="[PATH]/jquery.js" /> // optional
		&lt;script type="text/javascript" src="[PATH]/i18next.min.js" />
	&lt;/head>
	&lt;body>
		&lt;ul class="navigation">
			&lt;li>&lt;a href="#" data-i18n="nav.dash.main">&lt;/a>&lt;/li>
			&lt;li>&lt;a href="#" data-i18n="nav.email.main">&lt;/a>&lt;/li>
			&lt;li>&lt;a href="#" data-i18n="nav.snippets.main">&lt;/a>&lt;/li>
		&lt;/ul>
	&lt;/body>
&lt;/html></code></pre>

						
						<div class="row">
							<div class="col-md-6">
								<p class="text-semibold">Loaded resource file (assets/locales/*.json):</p>
								<pre class="content-group"><code class="language-javascript">{
	"app": {
		"name": "Framework template"
	},
	"nav": {
	    "dash": {
	        "main": "Dashboards"
	    },
	    "email": {
	        "main": "Email templates"
	    },
	    "snippets": {
	        "main": "Snippets"
	    }
	}
}</code></pre>
							</div>

							<div class="col-md-6">
								<p class="text-semibold">Javascript code:</p>
								<pre class="content-group"><code class="language-javascript">// Initialize i18next
$.i18n.init({
	resGetPath: 'assets/js/locales/__lng__.json',
	debug: true,
	load: 'unspecific',
	fallbackLng: false
}, function (t) {
	$('body').i18n(); // translate nav
});

// Change language on button click
$('.russian').on('click', function () {
	i18n.setLng('ru', function() {
	    $('body').i18n();
	});
})
</code></pre>
							</div>
						</div>


						<h6 class="text-semibold">Set language on init and after init</h6>
						<p class="content-group">The plugin allows you to set specified language <code>on init</code> and <code>after init</code>. If language is set on init, resources will be resolved in this order: 1) try <span class="text-semibold">languageCode</span> plus <span class="text-semibold">countryCode</span>, eg. <code>'en-US'</code>; 2) alternative look it up in <span class="text-semibold">languageCode</span> only, eg. <code>'en'</code>; 3) finally look it up in definded fallback language, default: <code>'dev'</code>. <br>If language is not set explicitly, i18next tries to detect the user language by: 1) querystring parameter <code>?setLng=en-US</code>; 2) cookie; 3) language set in navigator.</p>

						<div class="row">
							<div class="col-md-6">
								<p class="text-semibold">On init example:</p>
<pre class="content-group"><code class="language-javascript">i18n.init({ lng: 'en-US' }, function(t) {
	$('body').i18n();
});</code></pre>
							</div>

							<div class="col-md-6">
								<p class="text-semibold">After init example:</p>
<pre class="content-group"><code class="language-javascript">i18n.setLng('en-US', function(t) {
	$('body').i18n();
});</code></pre>
							</div>
						</div>
					</div>
				</div>
				<!-- /i18next overview -->


				<!-- i18next options -->
				<div class="panel panel-flat">
					<div class="panel-heading">
						<h5 class="panel-title">Library options</h5>
						<div class="heading-elements">
							<ul class="icons-list">
		                		<li><a data-action="collapse"></a></li>
		                		<li><a data-action="reload"></a></li>
		                		<li><a data-action="close"></a></li>
		                	</ul>
	                	</div>
					</div>

					<div class="panel-body form-horizontal">
						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Querystring param:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	detectLngQS: 'lang'
});</code></pre>
								<span class="help-block">The current locale to set will be looked up in the new parameter: <code>?lang=en-US</code>. Default is <code>?setLng=en-US</code>.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Cookie name:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	cookieName: 'lang' // default 'i18next'
});</code></pre>
								<span class="help-block">The current locale to set and looked up in the given cookie parameter.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Cookie domain:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	cookieDomain: '*.mydomain.com'
});</code></pre>
								<span class="help-block">Sets the cookie domain to given value.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Cookie usage:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	useCookie: false
});</code></pre>
								<span class="help-block">Use this only if your sure that language will be provided by the other lookup options or set programatically.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Preload additional languages on init:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	preload: ['de-DE', 'fr']
});</code></pre>
								<span class="help-block">The additional languages will be preloaded <code>on init</code>.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Preload additional languages after init:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.preload([lngs], callback)</code></pre>
								<span class="help-block">The additional languages will be preloaded <code>after init</code> by calling this function.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Languages whitelist:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	lngWhitelist: ['de-DE', 'de', 'fr']
});</code></pre>
								<span class="help-block">Only specified languages will be allowed to load.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Additional namespaces:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">// Single 
i18n.loadNamespace('myNamespace', function() {
	// loaded
});

// or multiple
i18n.loadNamespaces(
	[
		'myNamespace1',
		'myNamespace2'
	],
	function() {
		// loaded
	}
);</code></pre>
								<span class="help-block">The additional namespaces will be loaded.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Unset/Set fallback language:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">// Single 
i18n.init({
	fallbackLng: 'en'
});

// or multiple
i18n.init({
	fallbackLng: ['fr', 'en']
});</code></pre>
								<span class="help-block">If not set it will default to <code>'dev'</code>. If turned on, all missing key/values will be sent to this language.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Turn off fallback:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	fallbackLng: false
});</code></pre>
								<span class="help-block">As the fallbackLng will default to <code>'dev'</code> you can turn it off by setting the option value to <code>false</code>. This will prevent loading the fallbacks resource file and any futher look up of missing value inside a fallback file.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Load locales:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	load: 'current'
});</code></pre>
								<span class="help-block content-group">If load option is set to <code>current</code> i18next will load the current set language (this could be a specific (en-US) or unspecific (en) resource file).</span>

								<pre><code class="language-javascript">i18n.init({
	load: 'unspecific'
});</code></pre>
								<span class="help-block">If set to unspecific i18next will always load the unspecific resource file (eg. en instead of en-US).</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Caching with localStorage:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({ 
	useLocalStorage: true | false,
	localStorageExpirationTime: 86400000 // in ms, default 1 week
});</code></pre>
								<span class="help-block">Caching is turned off by default. If the resouces in a given language had been stored to <code>localStorage</code> they won't be fetched / reloaded from online until set <code>localStorageExpirationTime</code> expired. So if they had been cached once and you add new resources, they won't be reloaded until expired. But you can easily remove the values from localstorage by calling, eg.: <code>localStorage.removeItem("res_en" )</code>.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Null values:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	fallbackOnNull: true | false
});</code></pre>
								<span class="help-block">Default is <code>true</code>.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Empty string values:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	fallbackOnEmpty: true | false
});</code></pre>
								<span class="help-block">Default is <code>false</code>.</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-3 control-label text-semibold">Debug output:</label>
							<div class="col-lg-9">
								<pre><code class="language-javascript">i18n.init({
	debug: true
});</code></pre>
								<span class="help-block">If something went wrong you might find some helpful information on console log.</span>
							</div>
						</div>
					</div>
				</div>
				<!-- /i18next options -->

			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->


		<!-- Footer -->
		<div class="footer text-muted">
			&copy; 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
		</div>
		<!-- /footer -->

	</div>
	<!-- /page container -->

</body>
</html>
